<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        /*title: {
            text: '各科学习进度雷达图',//主标题名称
            right: 40,//位置，距右边的距离
            bottom: 60,//距下边的距离
            textStyle: {//标题文本样式
                color: "#4a4a4a",//标题颜色
                fontSize: "18",//标题字体大小
                fontWeight: "bold",//标题是否加粗

            }
        },*/
        tooltip: {
            show:true,//是否显示
            // trigger:"item",
            backgroundColor:"rgba(170,230,248,0.5)",//提示框背景色
            enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
            confine:true,//是否将 tooltip 框限制在图表的区域内。
            textStyle:{//提示框浮层的文本样式。
                color:"#086683",
                fontSize:12,
            },
        },
        radar: {
            // shape: 'circle',
            nameGap: 15,   //指示器名称和指示器轴的距离。
            name: {//雷达图每个指示器名称的配置项。
                textStyle: {
                    color: '#4a4a4a',
                    borderRadius: 3,
                    fontSize:"16",
                }
            },
            center:["50%","50%"],//中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            radius:"80%",//半径，数组的第一项是内半径，第二项是外半径。
            startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度。
            splitNumber: 5,//指示器轴的分割段数。
            splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
                show:true,
                areaStyle: {
                    color: 'rgba(255,0,0,0)', // 图表背景的颜色//
                }
            },
            axisLine: {//坐标轴轴线相关设置。
                show:true,
                lineStyle: {
                    color: ['rgba(241, 241, 241, 0.6)']
                },
            },
            splitLine: {//坐标轴在 grid 区域中的分隔线。
                show:true,
                lineStyle: {
                    color: ["rgba(238, 238, 238, 0.5)"]
                }
            },
            // triggerEvent:true,
            indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度），
                { name: '数学', max: 100},
                { name: '语文', max: 100},
                { name: '化学', max: 100},
                { name: '物理', max: 100},
                { name: '生物', max: 100},
                { name: '旱鸭子游泳', max: 100},
                { name: '高等数学', max: 100}
            ],
        },
        name: {//雷达图每个指示器名称的配置项。
            textStyle: {
                color: '#4a4a4a',
                borderRadius: 3,
                fontSize:"16",
            }
        },
        series: [
            {name: '自评 vs 他评',//系列名称，用于tooltip的显示，
                type: 'radar',
                symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                symbolSize: 8, // 拐点的大小
                itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）： // 设置区域边框和区域的颜色
                    normal: {
                        color: 'rgba(255,225,0,.3)',
                        lineStyle: {
                            color: 'rgba(255,225,0,.3)',
                        },
                    },
                },
                data : [//雷达图的数据是多变量（维度）的，
                    {
                        value : [10, 18, 60, 50, 20, 20, 100],
                        name : '进度',//数据项名称
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,225,0,.3)',
                                lineStyle: {
                                    color: 'rgba(255,225,0,.3)',
                                },
                            },
                        },
                    }
                ]
            }
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
